<script>
  import { defineComponent, ref, onMounted } from '@vue/composition-api';
  import { GetActivityCancelApplyList,GetActivityMemberList, addFile, actActivity,actInfo } from '@/api/activity1';
  import { Message, MessageBox } from 'element-ui';
  import router from '@/router';
  import { download } from '@/utils/request';
  import { getToken } from '@/utils/auth';
  
  export default defineComponent({
    props: {
      status: Number,
      activityId: String,
      mark2:Number,
    },
    setup(props) {
      const loading = ref(false);
      const list = ref([]);
      const activityMemberIds = ref([]);
      const pageNum = ref(1);
      const pageSize = ref(10);
      const open = ref(false);
      const openAct = ref(false);
      const markOpen = ref(false);
      const multiple = ref(true);
      const uploadUrl = ref('');
      const radio = ref('2');
      const total = ref(0);
      const activityId = router.history.current.params.activityId
      // console.log(activityId);
      const placeFileList = ref([]);
      const files = ref([])
      const uploadHeaders = ref({ Authorization: 'Bearer ' + getToken() });
      const formRef = ref();
      const markFrom = ref([]);
      const formModel = ref({ studentId: '' });
      const upload = ref(
        {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: '',
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: 'Bearer ' + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + '/common/upload',
          // url: process.env.VUE_APP_BASE_API + '/system/user/importData',
          college: '',
          fileChangeFlag: false,
          fileList: [],
          teamid: '',
          progressFlag: true, // 显示进度条
          loadProgress: 0,
        }
      )
      const loadData = async () => {
        loading.value = true;
        const payload = {
          pageNum: pageNum.value,
          pageSize: pageSize.value,
          ...formModel.value,
          activityId: activityId,//'0T8ofpRjLWN9UcwQUO8'//
        };
        const response = await GetActivityMemberList(payload);
        loading.value = false;
        if (response.code === 200) {
          const { rows, total: rowTotal } = response;
          list.value = rows;
          total.value = rowTotal;
        } else {
          loading.value = false;
        }
      };
  
      const goBack = async () => {
        //删除当前标签页
        const detailPath = await handleActivePath(route, true)
        store.dispatch('tabs/delVisitedRoute', detailPath)
        //打开父标签
        await router.push('Transfer')
      };
  
      // 上传材料
      const AddList = async () => {
        open.value = true
        uploadUrl.value = process.env.VUE_APP_BASE_API + '/common/upload'
        // console.log(upload.value.open);
      }
      // 文件上传中处理
      const handleFileUploadProgress = (event, file, fileList) => {
        upload.value.isUploading = true;
      }
      // 文件上传成功处理
      const handleFileSuccess = (response, file, fileList) => {
        console.log(response);
        files.value.push(response.url)
        upload.value.isUploading = false;
        // upload.value.clearFiles();
      }
      // 上传失败
      const handleUploadError = async (err) => {
        Message({
          message: '上传失败, 请重试',
          type: 'error',
        });
      }
  
      const submitFileForm = async () => {
        const data = {
          urls: files.value,
          activityId:activityId
        }
        console.log(data);
        const response = await addFile(data)
        // console.log(response);
        if (response.code === 200) {
          Message({
            message: '上传成功',
            type: 'success',
          });
          resets()
          loadData()
        }
      }
      const resets = async () => {
        // upload.value.clearFiles();
        placeFileList.value = []
        open.value = false
        openAct.value = false
        radio.value = '2'
      }
      // 多选
      const handleSelectionChange = (selection) => {
        activityMemberIds.value = selection.map(item => item.activityMemberId);
        // this.single = selection.length !== 1;
        multiple.value = !selection.length;
      }
      const actionAct = (row) => {
        if(row.activityMemberId){
          activityMemberIds.value = []
          activityMemberIds.value.push(row.activityMemberId)
          console.log(activityMemberIds.value);
        }else{
          activityMemberIds.value = activityMemberIds.value
        }
        // activityIds.value = row.activityMemberOrganizeId || activityIds.value
        openAct.value = true
      }
      const submitAct = async() =>{
        console.log(activityMemberIds.value);
        let data = {
          activityMemberIds:activityMemberIds.value,
          status:radio.value
        }
        // console.log(data);
        const res = await actActivity(data)
        console.log(res);
        if(res.code === 200){
          Message({
            message: res.msg,
            type: 'success',
          });
          loadData();
          resets()
        }
      }
      const openUrl = fileName => {
      // window.open(process.env.VUE_APP_BASE_API +fileName);
        download(
          '/common/download/resource',
          {
            fileName
          },
          `${fileName}`
        );
      };
      const getActInfo = async (row) =>{
        markOpen.value = true
        const res = await actInfo(row.userName,activityId)
        console.log(res);
        if(res.code === 200){
          markFrom.value = res.rows
        }
      }
      const refresh = () => {
        pageNum.value = 1;
        loadData();
  
      };
  
      const reset = formEl => {
        formEl.resetFields();
        refresh();
      };
  
      onMounted(() => {
        loadData();
      });
      return {
        formRef,
        formModel,
        loadData,
        reset,
        loading,
        list,
        total,
        pageNum,
        pageSize,
        uploadUrl,
        open,
        uploadHeaders,
        AddList,
        handleFileUploadProgress,
        handleFileSuccess,
        handleUploadError,
        submitFileForm,
        resets,
        placeFileList,
        handleSelectionChange,
        actionAct,
        openAct,
        openUrl,
        radio,
        multiple,
        submitAct,
        getActInfo,
        markOpen,
        markFrom
      };
    },
  });
  </script>
  
  <template>
    <div class="app-container">
      <el-row>
        <el-form ref="formRef" :model="formModel" inline size="mini">
          <el-form-item label="学生" prop="studentId">
            <el-input v-model="formModel.studentId" placeholder="请输入学号或姓名" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="loadData">查询</el-button>
            <el-button type="primary" size="mini" @click="reset(formRef)">重置</el-button>
            <el-button type="primary" size="mini" @click="AddList">上传材料</el-button>
            <el-button type="primary" size="mini" @click="actionAct" :disabled="multiple" v-hasPermi="['activity1:manager:shen']">批量审核</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="学号" align="center" prop="userName" />
          <el-table-column label="姓名" align="center" prop="nickName" />
          <el-table-column label="系部" align="center" prop="unitName" />
          <el-table-column label="类型" align="center" prop="role" />
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? '待审核' : scope.row.status == 2 ? '审核通过' : '审核不通过' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="getActInfo(scope.row)">
                查看
              </el-button>
              <el-button type="primary" size="mini" @click="actionAct(scope.row)" v-hasPermi="['activity1:manager:shen']">
                审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadData" />
      </el-row>
      <el-dialog title="上传材料" :visible.sync="open" width="400px">
  
        <el-form ref="form">
          <el-form-item>
            <el-upload ref="upload" :limit="3" :action="uploadUrl" :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess" :on-error="handleUploadError" :headers="uploadHeaders"
              :file-list="placeFileList">
              <el-button size="small" type="primary">材料上传</el-button>
              <div slot="tip" class="el-upload__tip">
                材料一次性最多只能上传3个,材料总大小不能超过1GB
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="resets">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="审核" :visible.sync="openAct" width="400px">
  
        <el-form ref="form">
          <el-form-item>
            <el-radio v-model="radio" label="2">审核通过</el-radio>
            <el-radio v-model="radio" label="3">审核拒绝</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitAct">确 定</el-button>
          <el-button @click="resets">取 消</el-button>
        </div>
      </el-dialog>
  
      <!--查看考核信息对话框 -->
      <el-dialog title="查看作品" :visible.sync="markOpen" width="800px" append-to-body>
        <el-table v-loading="loading" :data="markFrom" border>
          <el-table-column label="作品名称" align="center" prop="fileName">
            <template slot-scope="scope">
              <el-button type="text" @click="openUrl(scope.row.url)">{{scope.row.fileName}}</el-button>
            </template>
            </el-table-column>
          <el-table-column label="上传时间" align="center" prop="createTime" />
        </el-table>
      </el-dialog>
  
    </div>
  </template>
  